import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from './../../store/actions/home'
import { Carousel } from 'antd-mobile'
class Home extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    console.log(this.props)
    const { bannerList, proList } = this.props
    return (
      <div className="box">
        <header className="header">
          <ul>
            <li>左</li>
            <li>中</li>
            <li>右</li>
          </ul>
        </header>
        <div className="content">
          <Carousel
            autoplay={true}
            infinite
          >
            {bannerList && bannerList.map(item => (
              <a
                key={item.bannerid}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: 180 }}
              >
                <img
                  src={item.img}
                  alt=""
                  style={{ width: '100%', height: 180, verticalAlign: 'top' }}
                />
              </a>
            ))}
          </Carousel>
        </div>
      </div>
    )
  }
}
export default connect(({ home: { bannerList, proList }}) => ({ bannerList, proList }), 
(dispatch) => {
  return {
    getBannerList () {
      dispatch(action.getBannerListAction)
    },
    getProList () {
      dispatch(action.getProListAction())
    }
  }
})(Home)
